<template>
  <div style="margin-top: 3%; margin-bottom: 3%">
    <el-divider content-position="left"><h3>推荐</h3></el-divider>
    <el-col v-for="item in dataList" :key="item.videoId" :span="4" style="margin: 1%">
      <div @click="jumpToPlay(item)">
        <el-card :body-style="{ padding: '0px', height: '10%' }" shadow="hover">
          <el-image
            :src="getLocalImgFile(item.localPath)"
          >
            <div slot="error" class="image-slot">
              <el-image
                :src="item.img"
                fit="cover"
              />
            </div>
          </el-image>
          <div style="padding: 5px;">
            <div class="wrap">
              <el-tag
                v-for="(tag, index) in item.tag.split(',')"
                style="margin-left: 2px"
                :type="randomColor(index)"
                class="mx-1"
                effect="plain"
              >{{ tag }}
              </el-tag>
            </div>
            <el-tooltip class="item" effect="dark" :content="item.alt" placement="top-start">
              <span class="wrap">{{ item.alt }}</span>
            </el-tooltip>
          </div>
        </el-card>
      </div>
    </el-col>
  </div>
</template>
<script>
import { randomColor, getLocalImgFile, getLocalM3U8File } from '@/utils/spiderUtil'
import crudSpiderVideo from '@/api/spider/spiderVideo'

export default {
  // 视频推荐插件
  name: 'Recommend',
  props: ['param'],
  dicts: ['server_url'],
  data() {
    return {
      randomColor: randomColor,
      dataList: []
    }
  },
  created() {
    this.getRecommendData()
  },
  methods: {
    getLocalImgFile, getLocalM3U8File,
    jumpToPlay(data) {
      // data.img = this.getLocalImgFile(data.localPath)
      // data.playLink = this.getLocalM3U8File(data.localPath)
      this.$emit('jumpToPlay', data)
    },
    refresh() {
      this.getRecommendData()
    },
    getRecommendData() {
      const queryParam = {
        page: 0,
        size: 10,
        tag: this.param.tag
      }
      crudSpiderVideo.get(queryParam).then(data => {
        this.dataList = [...data.content]
      })
    }
  }
}
</script>

<style>
.wrap {
  word-break: break-all;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-height: 30px;
  overflow-y: hidden;
}
</style>
